/* 
    首页页面
 */
<template>
    <div class="homeMain">
        <!-- 导航栏 -->
        <van-nav-bar fixed>
            <van-button slot="title" type="info" size="small" round icon="search" class="searchBtn"  to="/search">
                搜索
            </van-button>
        </van-nav-bar>

        <!-- 频道列表 -->
        <van-tabs v-model="active" animated swipeable class="channelTabs">
            <van-tab v-for="item in channelList" :key="item.id" :title="item.name">
                <!-- 文字列表 -->
                <ArticleList :channel="item" />
            </van-tab>

            <div slot="nav-right" class="placeholder"></div>
            <div slot="nav-right" class="channelTabsBtn" @click="isChannelEditShow = true">
                <i class="iconfont icon-caidan"></i>
            </div>
        </van-tabs>

        <!-- 频道列表弹出层 -->
        <van-popup v-model="isChannelEditShow" position="bottom" :style="{ height: '100%' }" closeable
            close-icon-position="top-left">
            <EditChannel :myChannelList='channelList' :active="active" @updateActive="handleUpdateActive" />
        </van-popup>
    </div>
</template>

<script>
import ArticleList from './components/articleList'
import EditChannel from './components/editChannel'
import { mapState } from 'vuex'
import { getItem } from '@/utils/storage'

export default {
    name: 'Home',
    data() {
        return {
            active: 0,
            channelList: [
                { id: 1, name: 'html' },
                { id: 2, name: 'css' },
                { id: 3, name: 'js' },
                { id: 4, name: 'vue' },
                { id: 5, name: 'vant' },
                { id: 6, name: 'react' },
                { id: 7, name: 'vite' },
            ],

            // 频道列表弹出层
            isChannelEditShow: false,
        }
    },
    components: {
        ArticleList, EditChannel
    },
    compuet: {
        ...mapState(['user'])
    },
    created() {
        this.getChannelList()
    },
    methods: {
        // 获取频道列表
        async getChannelList() {
            const that = this
            try {
                let arr = []

                if (this.user) {
                    // 已登录,获取用户频道列表
                    // const {res}=await 
                    // arr=res.data.channels
                } else {
                    // 未登录,获取本地列表,有=>拿来使用;没有,请求默认
                    if (getItem('channelList')) {
                        arr = getItem('channelList')
                    } else {
                        // 获取默认频道
                        // const {res}=await 
                        // arr=res.data.channels
                    }
                }
                this.channelList = arr
                console.log(this.channelList)
            } catch (error) {
                that.$toast('获取频道列表数据失败')
            }
        },
        // 非编辑状态传的active
        handleUpdateActive(e, isChannelEditShow = true) {
            this.active = e //更新激活频道项
            this.isChannelEditShow = isChannelEditShow //关闭编辑弹层
        },
    }
}
</script>

<style scoped lang="less">
.homeMain {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-bottom: 50px;

    /deep/.van-nav-bar__content {
        background: #0F73F0;
    }

    /deep/ .van-nav-bar__title {
        max-width: unset;
    }

    /deep/ .searchBtn {
        width: 260px;
        height: 32px;
        background: #5babfb;
        border: none;
        color: #fff;

        .van-nav-bar .van-icon {
            color: #fff;
        }
    }

    /deep/ .channelTabs {
        .van-tab {
            min-width: 100px;
            height: 42px;
            border-right: 1px solid #edeff3;
        }

        .van-tab--active {
            font-size: 14px;
            font-weight: bold;
        }

        .van-tabs__nav {
            padding-bottom: 0;
        }

        .van-tabs__line {
            width: 15px;
            border-radius: 3px;
            background-color: #0F73F0;

            bottom: 4px;
        }

        .placeholder {
            width: 33px;
            height: 42px;
            flex-shrink: 0;
        }

        .channelTabsBtn {
            position: fixed;
            right: 0;
            width: 33px;
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 9999;
            background: #fff;
            opacity: 0.9;

            i {
                color: #000;
                font-weight: bold;
            }
        }

        // 固定导航
        .van-tabs__wrap {
            position: fixed;
            top: 46px;
            left: 0;
            right: 0;
            z-index: 999;
        }

        // 显示内容
        .van-tabs__content {
            padding-top: 90px;
        }
    }

}
</style>